<template>
  <el-container class="wel-super-admin">
    <el-aside class="left-tree-container">
      <tree-bear
      :treeData = "treeNavData"/> <!-- 树 -->
      <el-button
        plain
        class="add-tree-btn"
        @click="addNav">
        添加导航
      </el-button>

      <!-- 导航名称 -->
       <el-dialog
        title="添加导航名称"
        top="30vh"
        :visible.sync="navigationVisible"
        width="30%">
        <el-input
          placeholder="首页/用户管理/创建用户"
          v-model="input1"
          clearable>
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="navigationVisible = false">关 闭</el-button>
          <el-button type="primary" @click="navigationVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- end -->

    </el-aside>
    <el-container>
      <el-main class="right-conent-container">
        <rights-table-view
          :data="tableData"/>
        <sept-pages
          :total="tableData.length"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { myData, navTree } from 'apis/plugins/mixin'
import TreeBear from 'comps/TreeBear'
import RightsTableView from './child/RightsView'
export default {
  mixins: [myData,navTree],
  data() {
    return {
      input1: '',
      navigationVisible: false,
    }
  },
  components: {
    TreeBear,
    RightsTableView,
  },
  methods: {
    addNav() {
      this.navigationVisible = true
    },
    handleSizeChange() {
      /* 分页 */
    },
    handleCurrentChange() {
      /* 分页 */
    },
  },
}
</script>

<style lang="scss" scoped>

.wel-super-admin {
  height: 100%;
  &::v-deep .el-main {
    padding: 0;
  }
  .left-tree-container {
    position: relative;
    width: 240px !important;
  }
  .add-tree-btn {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>